* {
  padding: 0%;
  margin: 0%;
}

.main-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-self: center;
}

.e-tb {
  cursor: pointer;
}
/* 选中行的样式 */
.el-table .selected-row {
  /* background-color: #f0f9eb;   */
  background-color: #F0F0F0;  
}

/* CarExtras 对话框样式 */
.carextras-input-container {
  padding: 10px 0;
}

.carextras-item {
  margin-bottom: 15px;
}

.carextras-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.carextras-name {
  display: flex;
  align-items: center;
  flex: 1;
}

.carextras-name .name-label {
  margin-left: 8px;
  font-weight: 500;
  color: #303133;
}

.carextras-value {
  display: flex;
  align-items: center;
}

.carextras-value .value-label {
  margin-left: 8px;
  font-size: 14px;
  color: #606266;
  min-width: 40px;
}

/* UInt64 对话框样式 */
.uint64-input-container {
  padding: 10px 0;
  max-height: 500px;
  overflow-y: auto;
}

.uint64-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.header-name {
  flex: 1;
}

.header-value {
  min-width: 100px;
  text-align: center;
}

.uint64-list {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.uint64-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
}

.uint64-item:last-child {
  border-bottom: none;
}

.uint64-item:hover {
  background-color: #f5f7fa;
}

.uint64-name {
  flex: 1;
  font-family: monospace;
  font-size: 14px;
  color: #303133;
}

.uint64-value {
  display: flex;
  align-items: center;
  min-width: 100px;
  justify-content: center;
}

.uint64-value .value-label {
  margin-left: 8px;
  font-size: 12px;
  color: #606266;
  min-width: 35px;
}

.main-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.left-section {
  width: 300px;
  padding: 20px;
  border-right: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
}

.table-container {
  margin-bottom: 20px;
  border-bottom: 1px solid lightblue;
}

.tree-container {
  /* flex: 1; */
  overflow: hidden;
}

.center-section {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.right-section {
  width: 400px;
  /* padding: 20px; */
  border-left: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}
.right-section::-webkit-scrollbar {
  width: 0; /* 隐藏滚动条 */
}
.info-panel {
  margin-bottom: 20px;
  .el-card__body{
    overflow-y: scroll;
  }
}
.details-panel {
  margin-bottom: 20px;
  /* .el-card__body{
    overflow-y: scroll;
  }
  -ms-overflow-style: none;  
  scrollbar-width: none;   */
}
.details-panel ::-webkit-scrollbar {
  width: 0; /* 隐藏滚动条 */
}
.details-panel {
  flex: 1;
  /* overflow: auto; */
}
/* .node-details{
  overflow-y: scroll;
  -ms-overflow-style: none;  
  scrollbar-width: none;  
} */
.node-details::-webkit-scrollbar {
  width: 0; /* 隐藏滚动条 */
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.node-info, .node-details {
  padding: 0;
}
.data-type-config {
  margin-top: 20px;
}

.config-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.config-item label {
  min-width: 50px;
  text-align: left;
  margin-right: 10px;
  font-weight: 800;

}

.double-input {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
}

.structure-input {
  display: flex;
  gap: 20px;
  flex: 1;
}

.structure-input div {
  display: flex;
  align-items: center;
}

.structure-input label {
  min-width: auto;
  margin-right: 5px;
}

input[type='number'],
input[type='text'],
input[type='datetime-local'],
select {
  padding: 5px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  flex: 1;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  background-image: none;
  transition: border-color 0.2s;
}

input:focus,
select:focus {
  outline: none;
  border-color: #409eff;
}

select {
  appearance: none;
  padding-right: 30px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23606266'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 12px;
}
/* 通用展开图标样式，兼容两种树组件 - 优化版本，保持缩进 */
.tree-container .el-tree-node__expand-icon,
.tree-container .el-tree-v2__expand-icon {
  display: inline-block !important;
  visibility: visible !important;
  cursor: pointer !important;
  color: #606266 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  transition: opacity 0.15s ease !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  line-height: 16px !important;
  /* 确保不影响缩进计算 */
  margin: 0 !important;
  padding: 0 !important;
}

.tree-container .el-tree-node__expand-icon:hover,
.tree-container .el-tree-v2__expand-icon:hover {
  color: #409eff !important;
}

/* 通用叶子节点展开图标样式 - 保持占位防止布局跳动，不影响缩进 */
.tree-container .el-tree-node__expand-icon.is-leaf,
.tree-container .el-tree-v2__expand-icon.is-leaf {
  opacity: 0 !important;
  visibility: hidden !important;
  /* 保持占位空间，防止布局跳动 */
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  /* 确保不影响缩进计算 */
  margin: 0 !important;
  padding: 0 !important;
}
 
.right-section {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 400px; /* 固定右侧宽度 */
  min-width: 400px;
  border-left: 1px solid #ebeef5;
}

.info-panel, .details-panel {
  height: 98%;
  min-height: 0; /* 确保flex子项可以正确滚动 */
  /* padding: 10px; */
}

.info-panel {
  border-bottom: 1px solid #ebeef5;
}

.box-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-card__body{
    padding: 0px 10px;
  }
}

.card-header {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.node-info, .node-details {
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden; /* 防止水平滚动 */
  /* padding: 10px; */
  height: 90%;
}

.data-type-config {
  margin-top: 20px;
  width: 100%;
}

.config-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  width: 100%;
}

.config-item label {
  min-width:50px;
  text-align: left;
  margin-right: 10px;
  font-weight: 800;
  flex-shrink: 0; /* 防止标签压缩 */
}

.double-input {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  min-width: 0; /* 确保flex子项可以正确收缩 */
}

.structure-input {
  display: flex;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.structure-input div {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.structure-input label {
  min-width: auto;
  margin-right: 5px;
}

input[type='number'],
input[type='text'],
input[type='datetime-local'],
select {
  padding: 5px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  flex: 1;
  min-width: 0;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  background-image: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

input:focus,
select:focus {
  outline: none;
  border-color: #409eff;
}

select {
  appearance: none;
  padding-right: 30px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23606266'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 12px;
}

/* 主容器布局 */
.main-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.left-section {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.center-section {
  flex: 2;
  min-width: 0;
  overflow: auto;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
.main-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.left-section {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height:100%; 
  .table-container{
     flex: 2;
     height: 20%;
     .node-label-p{
      display: flex;
      align-items: center;
     }
  }
  .tree-container{
    flex: 8;
    height: 80%;
    .el-tree{
      height: 90% !important;
      border-top:  1px solid #ebeef5;
    }
  }
}

/* Loading 动画样式 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 子表包装器样式 */
.sub-table-wrapper {
  margin: 12px auto;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 子表标题样式 */
.sub-table-header {
  width: 100%;
  margin-bottom: 8px;
  text-align: center;
  
  .sub-table-title {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #409eff, #67c23a);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
  }
}

/* 子表容器样式 */
.sub-table-container {
  width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  margin: 0 auto;
  
  .el-table {
    margin: 0;
    
    .el-table__header {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      font-weight: 600;
      
      th {
        padding: 10px 12px;
        font-size: 13px;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        text-align: center;
      }
    }
    
    .el-table__body {
      font-size: 12px;
      
      td {
        padding: 8px 12px;
        border-bottom: 1px solid #f1f3f4;
        text-align: center;
      }
      
      tr:hover {
        background-color: #f8f9fa;
        transform: translateY(-1px);
        transition: all 0.2s ease;
      }
      
      tr:nth-child(even) {
        background-color: #fafbfc;
      }
    }
  }
}

.tree-container {
  /* flex: 1; */
  overflow: auto;
  /* padding-top: 20px; */
}

.custom-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: scroll;
  height: 200px;
  /* max-width: 100%; */
}

.url-badge {
  background-color: #409eff;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: auto;
}

:deep(.el-tree-node__content) {
  height: 32px;
  padding-right: 8px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.cus-icon{
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  font-size: 1rem;
  color: gold;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ser-icon{
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  font-size: 1rem;
  color: #4191d7;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.none-icon{
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  font-size: 1rem;
  color: #0d3693;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cus-label{
  padding-left: 8px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0px;
  position: relative;
  font-size: 1rem;
  line-height: 1.55556;
  letter-spacing: 0.0125rem;
  text-rendering: optimizelegibility;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.cus-label::-webkit-scrollbar {
  height: 3px;
}

.cus-label::-webkit-scrollbar-track {
  background: transparent;
}

.cus-label::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.cus-label::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.cus-icons{
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  font-size: 1rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
  color:#173d68 ;
  margin-top: 4px;
}
.cus-icons-connect{
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  font-size: 1rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
  color:#7d80c0 ;
}
.cus-icons-view{
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  font-size: 1rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
  color:#76a6e3 ;
}
.tree-container::-webkit-scrollbar {
  width: 0;  /* 完全隐藏滚动条 */
  height: 0;
  background: transparent; 
}
.node-info::-webkit-scrollbar {
  width: 0;  /* 完全隐藏滚动条 */
  height: 0;
  background: transparent; 
}
.details-panel::-webkit-scrollbar {
  width: 0;  /* 完全隐藏滚动条 */
  height: 0;
  background: transparent; 
}
.bas-inp,.el-dialog-self{
  .el-input__wrapper{
    padding: 0 !important;
  }
}
.new-box{
   /* height: 300px; */
  /* .bas-car{
    height: 70px;
    
   } */
   .tit-box{
    margin-left: 10px;
   }
   
   .tit-boxs{
    display: flex ;
    align-items: center;
  }
}
/* .el-collapse-item .is-active {
  background: lightgray ;  
} */

.content-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-container > * {
  margin-bottom: 20px;
}

.content-container > *:last-child {
  margin-bottom: 0;
  flex: 1;
  overflow: auto;
}


.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
.el-table .el-table__expand-icon {
  display: none;
}
.icon-toggle{
  display: block;
  width: 10px;
  height: 10px;
  color: #000;
}

/* .el-descriptions__body .el-descriptions-item__content span {
  white-space: normal;
  word-break: break-all;
  display: block;
} */

 





/* 添加 CSS 优化 */
.node-container {
  display: flex;
  align-items: center;
  width: 100%;
  contain: strict; /* 限制重绘范围 */
}

.cus-icon, .ser-icon, .cus-icons-view, .none-icon {
  flex-shrink: 0;
  margin-right: 6px;
  font-size: 16px;
}

.node-label {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  contain: content; /* 优化渲染性能 */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.node-label::-webkit-scrollbar {
  height: 3px;
}

.node-label::-webkit-scrollbar-track {
  background: transparent;
}

.node-label::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.node-label::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 强制 GPU 加速 */
.el-tree-v2__node {
  transform: translateZ(0);
  will-change: transform;
}
 



/* 标题行：水平排布，垂直居中 */
.title-line {
  display: flex;
  align-items: center;
}

/* 按钮样式 */
.toggle-btn {
  margin-left: 8px;
  cursor: pointer;
  color: #409eff;
  font-size: 14px;
}

/* Card 容器：顶部留 8px 间距，宽度与标题行一致 */
.card-wrapper {
  margin-block-start: 8px;
}


/* 关键：卡片本身是块级元素，自然撑开父级 */
.name-card {
  overflow: hidden;
}

/* 进入/离开的动画 */
.expand-enter-active,
.expand-leave-active {
  transition: max-height 0.3s ease;
}

.expand-enter-from,
.expand-leave-to {
  max-height: 0;
}

.expand-enter-to,
.expand-leave-from {
  /* 只要给一个足够大的值即可 */
  max-height: 500px;
}


.property-value{
  .el-input__wrapper{
    padding: 0 !important;
  }
}

.svg-icon{
  width: 15px;
  height: 15px;
  fill: #409eff;
}
 
.my-descriptions :deep(.el-descriptions__table) {
  table-layout: auto !important;
  width: 100%;
}

.my-descriptions :deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  white-space: nowrap;
  width: 1px;       /* 让浏览器根据内容自动计算宽度 */
  padding: 0 12px;
}

.my-descriptions :deep(.el-descriptions__content) {
  width: auto;
}

.desc-wrapper {
  border: 1px solid #ebeef5;      /* 模拟 el-descriptions 边框 */
}

.desc-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  width: 85%;

}
.desc-row:last-child {
  border-bottom: none;
}

.desc-label {
  padding: 12px 10px;
  background: #f5f7fa;            /* 模拟 el-descriptions label 背景 */
  white-space: nowrap;
  flex-shrink: 0;        
  min-width: 120px !important;  
  display: flex;  
  align-items: center;      
}

.desc-content {
  flex: 1;                        /* 占剩余全部宽度 */
  padding: 12px 10px;
  word-break: break-all;
  width: 200px;
  .node-detail-input{

      width: 100%;
  }
}
 
.table-boxs{
  height: calc(100vh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
}
.node-detail-input{
  width: 100%;
}

/* Boolean dialog checkbox 样式 */
.boolean-checkbox-container {
  padding: 20px 0;
}

.checkbox-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.checkbox-item:hover {
  background-color: #f0f9ff;
  border-color: #409eff;
}

.checkbox-item:last-child {
  margin-bottom: 0;
}

/* Double dialog input 样式 */
.double-input-container {
  padding: 20px 0;
  max-height: 400px;
  overflow-y: auto;
}

.input-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.input-item:hover {
  background-color: #f0f9ff;
  border-color: #409eff;
}

.input-item:last-child {
  margin-bottom: 0;
}

.input-item .el-form-item {
  margin-bottom: 0;
}

.input-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

/* Byte dialog input 样式 */
.byte-input-container {
  padding: 20px 0;
  max-height: 400px;
  overflow-y: auto;
}

.byte-input-container .input-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.byte-input-container .input-item:hover {
  background-color: #f0f9ff;
  border-color: #409eff;
}

.byte-input-container .input-item:last-child {
  margin-bottom: 0;
}

.byte-input-container .input-item .el-form-item {
  margin-bottom: 0;
}

.byte-input-container .input-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

/* ByteString dialog input 样式 */
.bytestring-input-container {
  padding: 20px 0;
  max-height: 400px;
  overflow-y: auto;
}

.bytestring-input-container .input-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.bytestring-input-container .input-item:hover {
  background-color: #f0f9ff;
  border-color: #409eff;
}

.bytestring-input-container .input-item:last-child {
  margin-bottom: 0;
}

.bytestring-input-container .input-item .el-form-item {
  margin-bottom: 0;
}

.bytestring-input-container .input-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.bytestring-input-container .el-textarea__inner {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

/* ExpandedNodeId dialog 样式 */
.expandednodeid-input-container {
  padding: 20px 0;
  max-height: 500px;
  overflow-y: auto;
}

.expandednodeid-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background-color: #fafafa;
}

.expandednodeid-item:hover {
  background-color: #f0f9ff;
  border-color: #409eff;
}

.expandednodeid-item:last-child {
  margin-bottom: 0;
}

.expandednodeid-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.expandednodeid-label {
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.expandednodeid-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.field-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.field-group {
  flex: 1;
  min-width: 200px;
}

.field-group.full-width {
  flex: 1 1 100%;
  min-width: 100%;
}

.field-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 12px;
  color: #606266;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-group .el-input {
  width: 100%;
}

.field-group .el-input__inner {
  font-size: 13px;
  padding: 8px 12px;
}

.field-group .el-select {
  width: 100%;
}

.field-group .el-select .el-input__inner {
  font-size: 13px;
  padding: 8px 12px;
}

.bit-row{
  display: flex;
  align-items: center;
  width: 100%;
  .bit-label {
    min-width: 80px;            /* 根据最长文字调整 */
    text-align: right;      /* 文字右对齐 */
    margin-right:15px;      /* 与复选框间距 */
  }
  /* .bit-checkbox{
    margin-left: auto;
  } */
}

/* 文本溢出省略号样式 */
.text-ellipsis {
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  max-width: 100%;
  display: block;
  cursor: context-menu; /* 显示右键菜单光标 */
}

/* 右键下拉框样式 */
.desc-content .el-dropdown {
  width: 100%;
}

.desc-content .el-dropdown .text-ellipsis {
  cursor: context-menu;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.desc-content .el-dropdown .text-ellipsis:hover {
  background-color: #f5f7fa;
}

/* 下拉菜单项样式 */
.el-dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-dropdown-menu__item .el-icon {
  font-size: 14px;
}

/* 属性名称主容器样式 */
.property-name-main {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;        /* 现代浏览器 */
  -webkit-user-select: none;/* Safari / 旧版 Chrome */
  -moz-user-select: none;   /* Firefox 旧版 */
  -ms-user-select: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.property-name-main-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.expand-button {
  flex-shrink: 0;
  margin-left: 8px;
  cursor: pointer;
  color: #409EFF;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.optimized-tree{
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.optimized-tree::-webkit-scrollbar {
  width: 6px;
}

.optimized-tree::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.optimized-tree::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.optimized-tree::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}



/* 🚀 优化树组件样式 - 防止展开图标消失时的布局跳动，保持正确缩进 */
.optimized-tree :deep(.el-tree-node__expand-icon) {
  /* 确保展开图标有固定尺寸和过渡效果 */
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  transition: opacity 0.15s ease !important;
  flex-shrink: 0 !important;
  text-align: center !important;
  line-height: 16px !important;
  /* 确保不影响缩进计算 */
  margin: 0 !important;
  padding: 0 !important;
}

.optimized-tree :deep(.el-tree-node__expand-icon.is-leaf) {
  /* 叶子节点使用透明度隐藏，保持占位空间 */
  opacity: 0 !important;
  visibility: hidden !important;
  /* 保持占位空间，防止布局跳动 */
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  /* 确保不影响缩进计算 */
  margin: 0 !important;
  padding: 0 !important;
}

.optimized-tree :deep(.el-tree-node[data-has-children="false"] .el-tree-node__expand-icon) {
  /* 基于数据属性隐藏展开图标，但保持占位 */
  opacity: 0 !important;
  visibility: hidden !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  /* 确保不影响缩进计算 */
  margin: 0 !important;
  padding: 0 !important;
}

/* 确保树节点内容区域有稳定的布局 - 保持Element Plus默认缩进 */
.optimized-tree :deep(.el-tree-node__content) {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  /* 移除固定的padding-left，让Element Plus处理缩进 */
  padding-right: 8px !important;
}

/* 优化树节点标签的布局 */
.optimized-tree :deep(.el-tree-node__label) {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Loading 覆盖层样式 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 8px;
}

/* 表格 Loading 覆盖层样式 - 不覆盖表头 */
.loading-overlay-table {
  position: absolute;
  top: 40px; /* 表头高度，避免覆盖表头 */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 0 0 8px 8px;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loading-spinner {
  margin-bottom: 16px;
}

.loading-icon {
  font-size: 48px;
  color: #409eff;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 16px;
  color: #606266;
  margin-bottom: 12px;
  font-weight: 500;
}

.loading-dots {
  display: flex;
  gap: 4px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #409eff;
  animation: bounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Variables 面板样式 */
.properties-panel {
  position: relative;
  height: 100%;
}

/* 隐藏所有下拉箭头，避免白圈 */
.el-popper__arrow {
  display: none !important;
}

/* 详细信息面板样式 */
.details-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.details-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.detail-item {
  margin-bottom: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.detail-name {
  padding: 10px;
  background-color: #f5f7fa;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.expand-icon {
  font-size: 12px;
  color: #409eff;
}

.detail-children {
  padding: 10px;
}

.detail-child {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed #e4e7ed;
}

.detail-child:last-child {
  border-bottom: none;
}

.child-name {
  font-weight: bold;
}

.child-value {
  color: #409eff;
}
.logger-panel {
  background: #fff;
  padding: 0 0 16px 0;
}
.section-header {
  background: #e5e5e5;
  color: #333;
  font-weight: bold;
  padding: 4px 8px;
  border: 1px solid #bdbdbd;
  border-bottom: none;
  margin-bottom: 0;
  font-size: 14px;
}
.logger-main {
  border: 1px solid #bdbdbd;
  border-top: none;
  display: flex;
  flex-direction: row;
  margin-bottom: 0;
  min-height: 220px;
}
.logger-side-settings {
  width: 260px;
  padding: 8px 8px 0 16px;
  border-left: 1px solid #bdbdbd;
  background: #fafafa;
}
.settings-group {
  margin-bottom: 16px;
}
.settings-title {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 13px;
}
.output-settings {
  border: 1px solid #bdbdbd;
  border-top: none;
  padding: 8px 0 0 8px;
  background: #fafafa;
}
.runtime-row {
  border: 1px solid #bdbdbd;
  border-top: none;
  padding: 8px 8px 8px 8px;
  background: #fafafa;
  display: flex;
  align-items: center;
  font-size: 14px;
}

/* 图标旋转动画 */
.rotate-icon {
  transform: rotate(180deg);
}

/* 表格展开行的过渡动画 */
.el-table__expand-icon {
  transition: transform 0.3s ease;
}

.el-table__expand-icon--expanded {
  transform: rotate(90deg);
}

/* 展开行的过渡动画 */
.expanded-row {
  background-color: #f5f7fa;
}

/* 表格展开内容的过渡动画 */
.el-table__expand-column .el-table__expand-icon {
  transition: all 0.3s ease;
}

/* 展开行的内容过渡 */
.el-table__expanded-cell {
  transition: all 0.3s ease;
}

/* 鼠标悬停效果 */
.el-table__row:hover {
  background-color: #f5f7fa;
  transition: background-color 0.3s ease;
}

/* 展开内容的样式 */
.expand-content {
  animation: slideDown 0.3s ease-out;
}

.default-expand-content {
  font-size: 14px;
  line-height: 1.6;
}

.default-expand-content p {
  margin: 8px 0;
}

/* 滑入动画 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 属性配置面板样式 */
.properties-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 100px);
}

.panel-header {
  background: #f5f5f5;
  padding: 12px 16px;
  display: flex;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  color: #333;
  border-radius: 4px 4px 0 0;
}

.header-name {
  flex: 0 0 100px;
}
.header-type {
  flex: 0 0 200px;
}
.header-value {
  flex: 1;
}

.property-row {
  display: flex;
  align-items:center;
  min-height: 40px;
  border-bottom: 1px solid #e4e7ed;
  padding: 8px 12px;
  /* margin-top: 20px; */
}

/* 移除表格行悬停效果 */

.property-row.expanded {
  min-height: auto;
  height: auto;
}

.property-name.property-name-col {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0; /* 允许flex子项收缩 */
  /* background-color: #e6f7ff; */
}
.property-type.property-name-col {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0; /* 允许flex子项收缩 */
  /* background-color: #e6f7ff; */
}
 
.property-name-main {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;        /* 现代浏览器 */
  -webkit-user-select: none;/* Safari / 旧版 Chrome */
  -moz-user-select: none;   /* Firefox 旧版 */
  -ms-user-select: none;
  /* max-width: 100%; */
  box-sizing: border-box;
}

.name-card-float {
  margin-top: 6px;
  width: 100%;
  display: flex;
  justify-content: center;
  clear: both;
}

.name-card-float .el-card {
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: white;
  border: 2px solid #409eff;
  border-radius: 4px;
  font-size: 13px;
  color: #303133;
  padding: 8px 12px;
}

.property-value {
  flex: 1 1 auto;
  /* margin-left: 12px;
  margin-top: 15px; */
  
}

.property-value .el-input__inner {
  border: 2px solid #409eff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 值显示和编辑模式样式 */
.value-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 36px;
}

.value-display:hover {
  background-color: #e9ecef;
  border-color: #409eff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.value-text {
  flex: 1;
  font-size: 14px;
  color: #303133;
  word-break: break-word;
  display: -webkit-box;      /* 弹性盒模型 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;     /* 想保留几行就写几 */
  line-clamp: 2;             /* 标准属性 */
  overflow: hidden;
}

.edit-hint {
  color: #409eff;
  font-size: 16px;
  margin-left: 8px;
  opacity: 0.7;
}

.value-display:hover .edit-hint {
  opacity: 1;
  transform: scale(1.1);
}

.value-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.access-status-icon {
  font-size: 14px;
  opacity: 0.8;
}

.value-display:hover .access-status-icon {
  opacity: 1;
  transform: scale(1.1);
}

.value-edit {
  position: relative;
}

.edit-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  justify-content: center;
}

.edit-actions .el-button {
  padding: 4px 8px;
  font-size: 12px;
}

.type-id {
  color: #666;
  font-family: monospace;
  font-size: 13px;
  margin-left: 8px;
}

/* 其他面板样式 */
.details-panel,
.methods-panel,
.variables-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 200px;
}

.details-content,
.methods-content,
.variables-content {
  padding: 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.content-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.adaptive-tabs {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.adaptive-tabs > .el-tabs__content {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.adaptive-tab-pane {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  user-select: none;        /* 现代浏览器 */
  -webkit-user-select: none;/* Safari / 旧版 Chrome */
  -moz-user-select: none;   /* Firefox 旧版 */
  -ms-user-select: none;   
}

/* 确保卡片显示时能完全展开 */
.property-row.expanded {
  min-height: auto;
  height: auto;
  display: flex;
  align-items: center;
}

/* 选中行的样式 */
.property-row.selected-row {
  background-color: #e6f7ff !important;
  /* border: 2px solid #409eff; */
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
.bas-car{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Method Call Dialog Styles */
.method-call-container {
  max-height: 600px;
  overflow-y: auto;
}

.method-section {
  margin-bottom: 24px;
}

.section-header {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.method-table {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  background-color: #fafafa;
  font-weight: 600;
  color: #606266;
}

.header-name,
.header-value,
.header-datatype,
.header-description {
  padding: 0px 16px;
  border-right: 1px solid #e4e7ed;
  text-align: left;
}

.header-description {
  border-right: none;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  border-top: 1px solid #e4e7ed;
  transition: background-color 0.3s;
}

.table-row:hover {
  background-color: #f5f7fa;
}

.row-name,
.row-value,
.row-datatype,
.row-description {
  padding: 12px 16px;
  border-right: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  display: -webkit-box;           /* 弹性盒模型   */
  -webkit-box-orient: vertical;   /* 垂直排列     */
  overflow: hidden;
}

.row-description {
  border-right: none;
}

.row-name {
  font-weight: 500;
  color: #303133;
}

.row-datatype {
  color: #909399;
  font-size: 13px;
}

.row-description {
  color: #909399;
  font-size: 13px;
}

.method-result {
  margin-top: 16px;
}

/* Method OptionSet Dialog Styles */
.method-optionset-container {
  max-height: 500px;
  overflow-y: auto;
}

.optionset-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #f5f7fa;
  font-weight: 600;
  color: #606266;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.optionset-header .header-name,
.optionset-header .header-value {
  padding: 12px 16px;
  text-align: center;
  border-right: 1px solid #e4e7ed;
}

.optionset-header .header-value {
  border-right: none;
}

.optionset-list {
  border: 1px solid #e4e7ed;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.optionset-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #e4e7ed;
  transition: background-color 0.3s;
}

.optionset-item:last-child {
  border-bottom: none;
}

.optionset-item:hover {
  background-color: #f5f7fa;
}

.optionset-name,
.optionset-value {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  border-right: 1px solid #e4e7ed;
}

.optionset-value {
  border-right: none;
}

.optionset-value-display {
  margin-top: 16px;
  padding: 12px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  text-align: center;
  font-weight: 500;
  color: #409eff;
}

/* 表格滚动优化 - 重写版本 */
.properties-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 100px);
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.table-boxs {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  height: 0; /* 强制flex子元素计算高度 */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e4e7ed;
  border-top: none;
}

.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 子表格容器 */
.sub-table-container {
  overflow: auto;
  max-height: 300px;
}

.sub-table-wrapper {
  position: relative;
}

/* 表格行优化 */
.property-row {
  display: flex;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid #e4e7ed;
  padding: 8px 12px;
  cursor: pointer;
}
.property-row:hover {
  background-color: #e4e7ed;
}
.property-row:last-child {
  border-bottom: none;
}

/* 表格行悬停优化 */
/* 移除表格行悬停效果 */

/* 展开状态优化 */
.property-row.expanded {
  min-height: auto;
  height: auto;
}

/* 选中行优化 */
.property-row.selected-row {
  background-color: #e6f7ff !important;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

/* 过渡动画优化 */
.fade-enter-active, .fade-leave-active {
  transition: all 0.3s ease;
}

/* 子表格行手型光标 */
.sub-table-container .el-table__row {
  cursor: pointer;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Element Plus 表格优化 */
.el-table__body-wrapper {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 滚动条优化 */
.table-boxs::-webkit-scrollbar,
.sub-table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-boxs::-webkit-scrollbar-track,
.sub-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.table-boxs::-webkit-scrollbar-thumb,
.sub-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.table-boxs::-webkit-scrollbar-thumb:hover,
.sub-table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.node-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: contain;
}

.icon-object {
  background-image: url('/assets/treeIcon/object-group-svgrepo-com.svg');
}

.icon-type {
  background-image: url('/assets/treeIcon/type-square-svgrepo-com.svg');
}

.icon-group {
  background-image: url('/assets/treeIcon/magnifying-glass-backup-svgrepo-com.svg');
}

.icon-play {
  background-image: url('/assets/treeIcon/play-circle-svgrepo-com.svg');
}